<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS精灵</title>
<style type="text/css">
body,ul{margin:0; padding:0; list-style:none; }
ul{width:100px; height:300px;}
li{
	width:100px;
	height:60px;
	line-height:60px;
	color:#FFF;
	font-size:12px;
	background:url(images/jingling.png) no-repeat;   /*将精灵图作为盒子的背景 */
	float:left;
	margin:10px;
	padding-left:65px;
	color:#666;
	font-size:24px;
}
.box2{background-position:0px -60px;}   
.box3{background-position:0px -120px;} 
.box4{background-position:0px -180px;} 
.box5{background-position:0px -240px;} 
</style>
</head>
<body>
<ul>
	<li class="box1">聊天</li>
	<li class="box2">下载</li>
    <li class="box3">视频</li>
    <li class="box4">记事本</li>
    <li class="box5">博客</li>
</ul>
</body>
</html>